{extend name="cms/public/base" /}

{block name="content"}
<main id="mainbody">
    {if $_vars.page.base.mode == 1}
    <div class="container pt-4">
        <div class="row product-category-filter mb-3">
            <div class="col-md-12">
                <div class="">
                    <ul>
                        <li>
                            <div>
                                <a style="font-size:16px;font-weight:700;" href="/shop/index/product/list.html{if request()->get('kw')}?kw={:request()->get('kw')}{/if}" class="{if !$cat_id}active-cat{/if}">全部</a>
                                <a href="/shop/index/product/list.html" style="float: right;" class="text-sm text-muted">清空搜索条件</a>
                            </div>
                        </li>
                        {foreach $product_categories as $c}
                        <li>
                            <div>
                                <a style="font-size:16px;font-weight:700;" class="{if $cat_id==$c['id']}active-cat{/if}" href="/shop/index/product/list.html?cat_id={$c['id']}{if request()->get('kw')}&kw={:request()->get('kw')}{/if}">{$c.name}</a>
                                {foreach $c['childlist'] as $v}
                                <a class="{if $cat_id==$v['id']}active-cat{/if}" style="font-size: 14px;" href="/shop/index/product/list.html?cat_id={$v['id']}{if request()->get('kw')}&kw={:request()->get('kw')}{/if}">{$v.name}</a>
                                {/foreach}
                            </div>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
        {foreach $data['data'] as $product} 
        {php}
        $p_list = [];
        foreach($product['skus'] as $sku) {
            $p_list[$sku['value']] = ['id' => $sku['id'], 'price' => $sku['price'], 'stock' => $sku['stock'] ];
        }
        {/php}
        <div class="row mb-3 bg-white pt-2 pb-2 product-item" data-id="{$product.id}" data-skus='{:json_encode($p_list)}'>
            <div class="product-left col-3 m-auto">
                <img style="width: 100%;" src="{$product.image[0]}" alt="">
            </div>
            <div class="product-right col-7">
                <a href="/shop/index/product/info.html?id={$product.id}" class="product-title">
                    {$product.title}
                </a>
                <div>
                    <a href="/shop/index/product/info.html?id={$product.id}" class="product-desc text-sm text-muted mb-2">{$product.description}</a>
                </div>
                <div class=" m-title">价格 <span class="product-price">￥{$product['skus'][0]['price']}</span> <span class="ml-2">库存</span>  <span class="product-stock">{$product['skus'][0]['stock']}</span> <span>{$product['unit']['code']}</span></div>
                <div class="product-attr">
                    {foreach $product['attr_items'] as $index => $item} 
                    <span class="text-bolder m-title">{$product['attr_group'][$index]}</span>
                    <div>
                        {foreach $item as $i => $v} 
                        <span data-gid="{$index}" data-attr="{$i}" class="product-attr-item {if $i == 0}active{/if}">{$v}</span>
                        {/foreach}
                    </div>
                    {/foreach} 
                </div>                
            </div>
            <div class="col-2 m-auto">
                <div class="mb-3 text-center">
                    <span class="m-title mr-2">数量</span>
                    <span class="num-box">
                        <input class="quantity" type="number" value="1">
                    </span>
                </div>
                {if get_user()->isLogin()}
                <button class="w-100 btn btn-sm btn-primary btn-add-cart">加入购物车</button>
                <a href="/shop/index/cart/index.html" class="w-100 mt-2 btn btn-sm">查看购物车</a>
                {else}
                <a href="/login.html" class="w-100 btn btn-primary btn-add-cart btn-sm">加入购物车</a>
                <a href="/login.html" class="w-100 mt-2 btn btn-sm">查看购物车</a>
                {/if}
            </div>
        </div>
        {/foreach}
        <div class="row">
            <div class="m-auto bg-white">{$paginator|raw}</div>
        </div>
    </div>
    {else}
    <div class="container pt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="product-category-filter">
                    <ul>
                        <li>
                            <div>
                                <a style="font-size:15px;font-weight:700;" href="/shop/index/product/list.html" class="{if !$cat_id}active-cat{/if}">全部</a>
                            </div>
                        </li>
                        {foreach $product_categories as $c}
                        <li>
                            <div>
                                <a style="font-size:15px;font-weight:700;" class="{if $cat_id==$c['id']}active-cat{/if}" href="/shop/index/product/list.html?cat_id={$c['id']}">{$c.name}</a>
                                {foreach $c['childlist'] as $v}
                                <a class="{if $cat_id==$v['id']}active-cat{/if}" style="font-size: 14px;" href="/shop/index/product/list.html?cat_id={$v['id']}">{$v.name}</a>
                                {/foreach}
                            </div>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            {foreach $data['data'] as $item} 
            <div class="col-6 col-md-4 col-lg-3">
                {:widget('shop_product_item', ['product' => $item])}
            </div>
            {/foreach}
        </div>
        <div class="row mt-3">
            <div class="m-auto bg-white">{$paginator|raw}</div>
        </div>
    </div>
    {/if}
</main>

{/block}
{block name="styles"}
<link rel="stylesheet" href="/modules/shop/css/product-list.css">
{/block}
{block name="scripts"}
{if $_vars.page.base.mode == 1}
<script>
    Yi.ready(function() {
        function getCurrentAttr(id) 
        {
            var attrs = [];
            $('.product-item[data-id=' + id + '] .product-attr-item.active').each(function(index, el) {
                attrs.push($(el).text())
            });
            return attrs.join(',');
        }
        $('.product-attr-item').click(function() {
            var parent = $($(this).parents('.product-item')[0]);
            var id = parent.data('id')
            var gid = $(this).data('gid');
            $('.product-item[data-id=' + id + '] .product-attr-item[data-gid=' + gid + ']').removeClass('active');
            $(this).addClass('active');
            var sku = parent.data('skus')[getCurrentAttr(id)];
            $('.product-item[data-id=' + id + '] .product-price').text('￥' + sku.price);
            $('.product-item[data-id=' + id + '] .product-stock').text( sku.stock);
        });
        $('.btn-add-cart').click(function() {
            var parent = $($(this).parents('.product-item')[0]);
            var id = parent.data('id')
            var sku_id = parent.data('skus')[getCurrentAttr(id)].id;
            var data = {
                sku_id: sku_id, quantity: $('.quantity', parent).val()
            }
            Yi.post({
                url: '/shop/api/cart/add',
                data: data
            }, function() {
                Toastr.success("加入购物车成功");
                return false;
            });
        });
        var kw = Yi.getQuery('kw');
        if (kw) {
            var obj = {};
            $('.product-attr-item').each(function(index, item) {
                var parent = $($(this).parents('.product-item')[0]);
                var id = parent.data('id');
                var gid = $(item).data('gid');
                var k = id + '_' + gid;
                if ($(item).text().indexOf(kw) != -1) {
                    if (!obj[k] || $(item).text() == kw) obj[k] = $(item);
                }
            });
            $.each(obj, function(index, item) {
                item.click();
            })
        }
    })
</script>
{else} 
{/if}
{/block}